<template>
  <div class="doctor-schedule-page">
    <el-card>
      <div class="toolbar">
        <el-select v-model="selectedDept" placeholder="选择科室" class="filter-select">
          <el-option v-for="d in departments" :key="d.id" :label="d.name" :value="d.id" />
        </el-select>
        <el-select v-model="selectedDoctor" placeholder="选择医生" class="filter-select">
          <el-option v-for="d in filteredDoctors" :key="d.id" :label="d.name" :value="d.id" />
        </el-select>
        <el-radio-group v-model="viewType">
          <el-radio-button value="week">周视图</el-radio-button>
          <el-radio-button value="day">天视图</el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="batchSchedule">批量排班</el-button>
        <el-button @click="importSchedule">导入</el-button>
        <el-button @click="exportSchedule">导出</el-button>
        <el-button type="success" @click="addRow">新增排班</el-button>
      </div>
      <el-table :data="filteredSchedule" style="width:100%;margin-top:18px;" border>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column label="时间段" width="160">
          <template #default="scope">
            {{ scope.row.period }} {{ scope.row.time }}
          </template>
        </el-table-column>
        <el-table-column prop="department" label="科室" width="120" />
        <el-table-column prop="doctor" label="医生" width="120" />
        <el-table-column prop="desc" label="备注" />
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button size="small" @click="editRow(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editDialogVisible" title="编辑排班" width="400px">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="日期">
            <el-date-picker v-model="editForm.date" type="date" placeholder="选择日期" style="width:100%" :disabled-date="disabledDate" />
          </el-form-item>
          <el-form-item label="时间段">
            <el-radio-group v-model="editForm.period" style="margin-bottom: 8px">
              <el-radio-button label="上午">上午</el-radio-button>
              <el-radio-button label="下午">下午</el-radio-button>
            </el-radio-group>
            <el-select v-model="editForm.time" placeholder="选择时间" style="width:100%;margin-top:8px">
              <el-option v-for="t in timeOptions[editForm.period]" :key="t" :label="t" :value="t" />
            </el-select>
          </el-form-item>
          <el-form-item label="科室">
            <el-select v-model="editForm.department" placeholder="选择科室">
              <el-option v-for="d in departments" :key="d.id" :label="d.name" :value="d.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="医生">
            <el-select v-model="editForm.doctor" placeholder="选择医生">
              <el-option v-for="d in doctors" :key="d.id" :label="d.name" :value="d.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editForm.desc" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="editDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
const departments = ref([
  { id: '1', name: '内科' },
  { id: '2', name: '外科' },
  { id: '3', name: '妇产科' },
  { id: '4', name: '儿科' }
])
const doctors = ref([
  { id: '1', name: '李明', dept: '内科' },
  { id: '2', name: '王芳', dept: '外科' },
  { id: '3', name: '孙芸', dept: '妇产科' },
  { id: '4', name: '赵强', dept: '儿科' }
])
const selectedDept = ref('')
const selectedDoctor = ref('')
const viewType = ref('week')
const schedule = ref([
  { date: '2024-06-01', period: '上午', time: '08:00-08:30', department: '内科', doctor: '李明', desc: '门诊' },
  { date: '2024-06-01', period: '下午', time: '13:00-13:30', department: '外科', doctor: '王芳', desc: '手术' }
])
const editDialogVisible = ref(false)
const editForm = ref({ date: '', period: '上午', time: '', department: '', doctor: '', desc: '' })
const editIndex = ref(-1)
const timeOptions = {
  上午: [
    '08:00-08:30', '08:30-09:00', '09:00-09:30', '09:30-10:00',
    '10:00-10:30', '10:30-11:00', '11:00-11:30', '11:30-12:00'
  ],
  下午: [
    '13:00-13:30', '13:30-14:00', '14:00-14:30', '14:30-15:00',
    '15:00-15:30', '15:30-16:00', '16:00-16:30', '16:30-17:00'
  ]
}
const filteredDoctors = computed(() => {
  if (!selectedDept.value) return doctors.value
  return doctors.value.filter(d => d.dept === departments.value.find(dep => dep.id === selectedDept.value)?.name)
})
const filteredSchedule = computed(() => {
  let arr = schedule.value
  if (selectedDept.value) arr = arr.filter(s => s.department === departments.value.find(dep => dep.id === selectedDept.value)?.name)
  if (selectedDoctor.value) arr = arr.filter(s => s.doctor === doctors.value.find(doc => doc.id === selectedDoctor.value)?.name)
  return arr
})
function editRow(index:number, row:any) {
  editForm.value = { ...row, period: row.period || '上午' }
  editIndex.value = index
  editDialogVisible.value = true
}
function saveEdit() {
  if (editIndex.value >= 0) {
    schedule.value[editIndex.value] = { ...editForm.value }
    ElMessage.success('保存成功')
  } else {
    schedule.value.push({ ...editForm.value })
    ElMessage.success('新增成功')
  }
  editDialogVisible.value = false
  editIndex.value = -1
}
function deleteRow(index:number) {
  schedule.value.splice(index, 1)
  ElMessage.success('删除成功')
}
function addRow() {
  editForm.value = { date: '', period: '上午', time: '', department: '', doctor: '', desc: '' }
  editIndex.value = -1
  editDialogVisible.value = true
}
function batchSchedule() {
  ElMessage.info('批量排班功能待实现')
}
function importSchedule() {
  ElMessage.info('导入功能待实现')
}
function exportSchedule() {
  ElMessage.info('导出功能待实现')
}
function disabledDate(date: Date) {
  const today = new Date()
  today.setHours(0,0,0,0)
  return date < today
}
</script>
<style scoped>
.doctor-schedule-page {
  background: #f6fafd;
  border-radius: 12px;
  padding: 32px 0;
  min-height: 80vh;
}
.el-card {
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 32px 28px 28px 28px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-select {
  width: 160px;
}
@media (max-width: 900px) {
  .el-card {
    padding: 18px 6px 12px 6px;
  }
  .toolbar {
    gap: 10px;
  }
}
</style> 